
<template>
  <view class="tabbar_safearea">
    <u-tabbar
      v-if="useStore.stayPort == 'user'"
      activeColor="#FF6600"
      :active="useStore.activeTab"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
    >
      <u-tabbar-item
        :style="{
          color: useStore.activeTab === index ? '#0038F7' : '#BDC7DD',
          fontSize: '30rpx',
        }"
        v-for="(item, index) in tabbar_user"
        :key="index"
        :icon="getTabbarIcon(item, index)"
        :text="item.text"
        @tap="handleTabbarItemClick(item,index)"
      >
      </u-tabbar-item>
    </u-tabbar>

    <u-tabbar
      v-if="useStore.stayPort == 'staff'"
      activeColor="#FF6600"
      :active="useStore.activeTab"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
    >
      <u-tabbar-item
        :style="{
          color: useStore.activeTab === index ? '#0038F7' : '#BDC7DD',
          fontSize: '30rpx',
        }"
        v-for="(item, index) in tabbar_staff"
        :key="index"
        :icon="getTabbarIcon(item, index)"
        :text="item.text"
        @tap="handleTabbarItemClick(item, index)"
      ></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script setup>
import { onLoad, onUnload,onShow } from "@dcloudio/uni-app";
import { computed, reactive, ref } from "vue";
import sheep from '@/sheep';
import user from "@/sheep/store/user.js";
import { baseUrl } from "@/sheep/config";

const useStore = sheep.$store('user');
onShow(() => {
  // useStore.getInfo();
  if (useStore.userInfo.group_id !== 11) {
    tabbar_user.value = [
      {
        pagePath: "/pages/user/index/index",
        text: "首页",
        iconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_home_unselected.png`,
        selectedIconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_home_selected.png`,
      },
      {
        pagePath: "/pages/user/user/user",
        text: "个人中心",
        iconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_usercenter_unselected.png`,
        selectedIconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_usercenter_selected.png`,
      },
    ];
  } else {
    tabbar_user.value = [
      {
        pagePath: "/pages/user/index/index",
        text: "首页",
        iconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_home_unselected.png`,
        selectedIconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_home_selected.png`,
      },
      {
        pagePath: "/pages/user/task/task",
        text: "任务",
        iconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_tasks_unselected.png`,
        selectedIconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_tasks_selected.png`,
      },
      {
        pagePath: "/pages/user/user/user",
        text: "个人中心",
        iconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_usercenter_unselected.png`,
        selectedIconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_usercenter_selected.png`,
      },
    ];
  }
})

const tabbar_user = ref([
  {
    pagePath: "/pages/user/index/index",
    text: "首页",
    iconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_home_unselected.png`,
    selectedIconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_home_selected.png`,
  },
  {
    pagePath: "/pages/user/task/task",
    text: "任务",
    iconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_tasks_unselected.png`,
    selectedIconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_tasks_selected.png`,
  },
  {
    pagePath: "/pages/user/user/user",
    text: "个人中心",
    iconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_usercenter_unselected.png`,
    selectedIconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_usercenter_selected.png`,
  },
])

tabbar_user.value = [
  {
    pagePath: "/pages/user/index/index",
    text: "首页",
    iconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_home_unselected.png`,
    selectedIconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_home_selected.png`,
  },
  {
    pagePath: "/pages/user/task/task",
    text: "任务",
    iconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_tasks_unselected.png`,
    selectedIconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_tasks_selected.png`,
  },
  {
    pagePath: "/pages/user/user/user",
    text: "个人中心",
    iconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_usercenter_unselected.png`,
    selectedIconPath: `${baseUrl}/uploads/uniapp_image/user_v1/navi_icon_usercenter_selected.png`,
  },
];

const tabbar_staff = [
  {
    pagePath: "/pages/staff/index/index",
    iconPath: `${baseUrl}/uploads/uniapp_image/staff_v1/navibar_Checkin1.png`,
    selectedIconPath: `${baseUrl}/uploads/uniapp_image/staff_v1/navibar_Checkin2.png`,
    text: "打卡",
  },
  {
    pagePath: "/pages/staff/project/project",
    iconPath: `${baseUrl}/uploads/uniapp_image/staff_v1/navibar_project1.png`,
    selectedIconPath: `${baseUrl}/uploads/uniapp_image/staff_v1/navibar_project2.png`,
    text: "项目",
  },
  {
    pagePath: "/pages/staff/workbench/workbench",
    iconPath: `${baseUrl}/uploads/uniapp_image/staff_v1/navibar_workspace1.png`,
    selectedIconPath: `${baseUrl}/uploads/uniapp_image/staff_v1/navibar_workspace2.png`,
    text: "工作台",
  },
  {
    pagePath: "/pages/staff/user/user",
    iconPath: `${baseUrl}/uploads/uniapp_image/staff_v1/navibar_mycenter1.png`,
    selectedIconPath: `${baseUrl}/uploads/uniapp_image/staff_v1/navibar_mycenter2.png`,
    text: "我的",
  },
];


//点击tabbar按钮
const handleTabbarItemClick = (item, index) => {
  if (useStore.activeTab !== index) {
    uni.$u.throttle(() => {
      const path = item.pagePath;
      sheep.$router.go(path)
      useStore.setActive(index);
    }, 500)
  }
};

// const handleTabbarItemClickDebounced = (item,index) => {
//   uni.$u.debounce(handleTabbarItemClick(item,index),500)
// }

//图标的切换
const getTabbarIcon = (item, index) => {
  return useStore.activeTab == index ? item.selectedIconPath : item.iconPath;
  // uni.$u.debounce(toNext(item, index), 500);
}

// const toNext = (item, index) => {
//   return useStore.activeTab === index ? item.selectedIconPath : item.iconPath;
// };

</script>

<style scoped lang="scss">
.tabbar_safearea {
  width: 100%;
  height: 100rpx;
  // padding-bottom: 100rpx;
  // padding-bottom: constant(safe-area-inset-bottom) !important;
  // padding-bottom: env(safe-area-inset-bottom) !important;
}
</style>

